<script setup lang='ts'>
import { FormInstance, FormItemRule } from 'element-plus';
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router';

const router = useRouter()

type Form = {
    phoneNumber: string,
    password: string,
    rePassword: string,
    nickname: string
}

type Rules = {
    [K in keyof Form]: Array<FormItemRule>
}

const formInline = reactive<Form>({
    phoneNumber: '',
    password: '',
    rePassword: '',
    nickname: ''
})

//校验rePassword
const checkRePassword = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请再次输入密码'));
    } else if (value !== formInline.password) {
        callback(new Error('两次输入密码不一致!'));
    } else {
        callback();
    }
}

// 定义表单校验规则
const rules = reactive<Rules>({
    phoneNumber: [
        {
            required: true,
            message: '请输入账号',
            type: 'string'
        },
        {
            min: 11,
            max: 11,
            message: '手机号长度必须为11位',
            type: 'string'
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            type: 'string'
        },
        {
            min: 6,
            max: 18,
            message: '密码长度为6-18位',
            type: 'string'

        }
    ],
    rePassword: [
        {
            required: true,
            message: '请输入确认密码',
            type: 'string'
        },
        { validator: checkRePassword, trigger: 'blur' }
    ],
    nickname: [
        {
            required: true,
            message: '请输入昵称',
            type: 'string'
        },
        {
            min: 2,
            max: 10,
            message: '昵称长度为2-10位',
            type: 'string'
        }
    ]
})

//调用后台接口，完成注册
// TODO 这里密码是明文传输的，会有问题
import { userRegisterService } from '@/api/user'
const register = async () => {
    let result = await userRegisterService(formInline);
    ElMessage({
        showClose: true,
        message: result.msg ? result.msg : '注册成功',
        type: 'success',
    })
    //TODO 测试用，在控制台输出
    console.log(result);

    //注册成功之后跳转到登录页面
    router.push('/')
    return result;
}

// 返回按钮
const goBack = () => {
    router.back();
}

const formRef = ref<FormInstance>()
</script>

<template>
    <el-card class="LoginCard" style="max-width: 480px">
        <template #header>
            <div class="card-header">
                <div class="card-header-title">
                    <span>基于鸟鸣声的鸟类识别系统</span>
                </div>
                <div class="card-header-grow"></div>
                <el-button class="card-header-button" type="text" @click="goBack" style="margin-right: 10px;">
                    <el-icon>
                        <ArrowLeft />
                    </el-icon>
                    返回
                </el-button>
            </div>
        </template>
        <div>
            <el-form ref="formRef" :rules="rules" :inline="false" :model="formInline" class="demo-form-inline">
                <el-form-item label="手机号" prop="phoneNumber">
                    <el-input v-model="formInline.phoneNumber" placeholder="请输入手机号" clearable />
                </el-form-item>
                <!-- 昵称 -->
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="formInline.nickname" placeholder="请输入昵称" clearable />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="formInline.password" type="password" placeholder="请输入密码" clearable />
                </el-form-item>
                <el-form-item label="确认密码" prop="rePassword">
                    <!-- 再次输入密码 -->
                    <el-input v-model="formInline.rePassword" type="password" placeholder="请再次输入密码" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="register">register</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</template>

<style scoped>
.LoginCard {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.demo-form-inline {
    --el-input-width: 220px;
    margin: 20px;
}

.el-input {
    --el-input-width: 220px;
}

.card-header {
    display: flex;
    justify-content: space-between;
}

.card-header-grow { 
    flex: 1;
}
</style>